import React, { useEffect, useState } from 'react';
import { addDepartmemt, editDepartment, showDepartment } from '@/services/departments'
import { Form, message, Modal, Radio, Skeleton, TreeSelect } from 'antd'
import ProForm, { ProFormSelect, ProFormText } from '@ant-design/pro-form';

const Create = (props) => {

  let [initialValues, setInitialValues] = useState(undefined);
  const { isModalVisible,isShowModal,actionRef,id,resData } = props;

  const type = id !== undefined ? '编辑' : '添加'

  useEffect(async () => {
    if (id !== undefined) {
      const response = await showDepartment(id);
      console.log(response)
      setInitialValues({
        id: response.thisSection.id,
        name: response.thisSection.name,
        pid: response.thisSection.pid,
        status: response.thisSection.status,
        resData:response.thisSection.resData
      });
    }
  }, []);

  // 树状图组件
  const { TreeNode } = TreeSelect;
  const [value, setValue] = useState(undefined);
  const onChange = () => {
    setValue(value);
  };

  /**
   * 添加/修改 部门
   */
  const handleSubmit =async values => {
    let response = {}
    if (id == undefined){
      //执行添加
      response = await addDepartmemt(values);
    }else {
      //执行修改
      response = await editDepartment(id, values)
    }
    if (response.status === undefined) {
      message.success(`${type}成功`);
      actionRef.current.reload();
      isShowModal(false);
    }
  }

  return (
    <Modal
      destroyOnClose={true}
      key={0}
      title={`${type}部门`}
      visible={isModalVisible}
      onCancel={() => {
        isShowModal(false);
      }}
      footer={null}
    >
      {initialValues === undefined && id !== undefined? (
        <Skeleton avatar active paragraph={{ rows: 4 }} />
      ) : (
        <ProForm
          initialValues={initialValues}
          name="control-ref"
          onFinish={(values) => handleSubmit(values)}
        >
          {
            id == undefined ? '' :  <ProFormText disabled name="id" label="ID" rules={[{ required: true }]} />
          }
          <ProFormText width={'md'} name="name" label="部门名称" rules={[{ required: true }]} />

          <Form.Item  name="pid" label="父级部门">
            <TreeSelect
              showSearch
              style={{ width: '70%' }}
              value={value}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              placeholder="父级部门"
              allowClear
              treeDefaultExpandAll
              onChange={onChange}
            >
              {
                resData.map((item) =>{
                  return (
                    <TreeNode key={item.id} value={item.id} title={item.name}>
                      {
                        item.children.map(data => {
                          return(
                            <TreeNode key={data.id} value={data.id} title={data.name}>
                              {
                                data.children ? data.children.map(datas=>{
                                  return(
                                    <TreeNode key={datas.id} value={datas.id} title={datas.name} />
                                  )
                                }) : ''
                              }
                            </TreeNode>
                          )
                        })
                      }
                    </TreeNode>
                  )
                })
              }
            </TreeSelect>
          </Form.Item>

          <Form.Item
            rules={[{ required: true }]}
            width="md"
            name="status"
            label="部门状态"
          >
            <Radio.Group>
              <Radio value={0}>启用</Radio>
              <Radio value={1}>禁用</Radio>
            </Radio.Group>
          </Form.Item>
        </ProForm>

      )}
    </Modal>
  );
};

export default Create;
